<template>
  <el-card style="padding: 10px;margin-bottom: 10px ;">
    <el-form :model="form" label-width="120px">
      <el-col :span="8">
        <el-form-item label="一级分类">
          <el-select v-model="form.oneClassificationValue" placeholder="请选择" style="display: inline-block">
            <el-option :label="item.name" :value="item.id" v-for="(item) in oneClassification" :key="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="二级分类">
          <el-select v-model="form.twoClassificationValue" placeholder="请选择">
            <el-option :label="item.name" :value="item.id" v-for="(item) in twoClassification" :key="item.id" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="三级分类">
          <el-select v-model="form.threeClassificationValue" :placeholder="'请选择'   ">
            <el-option :label="item.name" :value="item.id" v-for="(item) in threeClassification" :key="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CategorySelector",
};
</script>

<script lang="ts" setup>
import { reactive, defineProps, watch, ref } from 'vue'
import { getTowClassificationAttr, getThreeClassificationAttr, getAttributesAttr } from '@/Api/product/attr'
import type { onClassificationArray } from '@/Api/product/model/attr'


const form = reactive({
  oneClassificationValue: '',
  twoClassificationValue: '',
  threeClassificationValue: ''
})

const twoClassification = ref<onClassificationArray>([])
const threeClassification = ref<onClassificationArray>([])


defineProps(["oneClassification"])
// onMounted(() => {
// })
// watch([form.oneClassificationValue, form.twoClassificationValue, form.threeClassificationValue], (newVal, oldVal) => {
//   // console.log(newVal, oldVal);
//   console.log(1);
// }, {})
// })
// watch([() => form.oneClassificationValue, () => form.twoClassificationValue, () => form.threeClassificationValue], (newVal, oldVal) => {
//   console.log(newVal);
// }, {})
watch(() => form.oneClassificationValue, async (newVal) => {
  let result = await getTowClassificationAttr(+newVal)
  twoClassification.value = result
  form.twoClassificationValue = ''
  form.threeClassificationValue = ''
  threeClassification.value = []

})
watch(() => form.twoClassificationValue, async (newVal) => {
  let result = await getThreeClassificationAttr(+newVal)
  threeClassification.value = result
  form.threeClassificationValue = ''
})

watch(() => form.threeClassificationValue, async (newVal) => {
  console.log(newVal);

  // const result = await getAttributesAttr(Number(form.oneClassificationValue), Number(form.twoClassificationValue), Number(newVal))
  // console.log(result);


})


</script>
  
<style scoped>

</style>